<template>
    <div>
      <el-form ref="elForm" size="mini" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="轮播图名称" prop="banner_name">
              <el-input v-model="form.banner_name" placeholder="请输入轮播图名称" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="轮播图" prop="banner_url">
              <image-upload v-model="form.banner_url" @input="getImgUrl"></image-upload>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
        <el-button size="mini" @click="cancel">取 消</el-button>
      </div>
    </div>
</template>

<script>
  import { addBanner, getBanner, updateBanner } from "@/api/base/banner";
  export default {
        name: "bannerForm",
        props: ['keyValue'],
        data() {
          return{
            menuOptions: [],
            form: {
              banner_name: '',
              banner_url: '',
              remark: '',
            },
            // 表单校验
            rules: {
              banner_name: [
                { required: true, message: "轮播图名称不能为空", trigger: "blur" }
              ],
              banner_url: [
                { required: true, message: "轮播图不能为空", trigger: "blur,change" }
              ],
            }
          }
        },
      mounted() {
        if(this.keyValue != null) {
          getBanner(this.keyValue).then(res=>{
            this.form = res.data;
          });
        }
      },
      methods:{
          getImgUrl(val){

          },
          // 确定
          submitForm(){
            this.$refs['elForm'].validate((valid) => {
              if (valid) {
                if(this.keyValue == null) {
                  addBanner(this.form).then(res=>{
                    this.commonMsg(res.code);
                  });
                } else {
                  updateBanner(this.form).then(res=>{
                    this.commonMsg(res.code);
                  });
                }
              } else {
                return;
              }
            });
          },
          // 取消
          cancel(){
            this.$emit('cancelForm');
          },
          // 公共提示
          commonMsg(code) {
            if(code == 200) {
              this.$message.success('操作成功.');
              this.$emit('closeDiag');
            } else {
              this.$message.error(res.msg);
            }
          }
        }
    }
</script>

<style scoped>

</style>
